<template>
  <div class="tab_installed">
    <div class="tab_inner"
         v-if="installedPlugins.length > 0">
      <PanelList :list="installedPlugins"
                 :active-index="activeIndex"
                 @change="changeActiveIndex"></PanelList>
      <PanelMain :info="installedPlugins[activeIndex]"
                 type="Installed"></PanelMain>
    </div>
    <transition name="fade">
      <div class="tab_empty"
           v-if="installedPlugins.length == 0">
        <svg>
          <use xlink:href="#icon-empty"></use>
        </svg>
        <div class="empty_info">
          <div class="empty_info_text">还没安装插件？去<a href="javascript:void(0)"
               style="margin: 0 5px;"
               @click="gotoTabPlugins($event)">插件中心</a>逛逛吧</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapActions } = createNamespacedHelpers('./store/modules')
export default {
  name: 'Installed',
  props: {
    activeTab: {
      type: String,
      default: ''
    }
  },
  components: {
    PanelList: () => import('./parts/PanelList'),
    PanelMain: () => import('./parts/PanelMain/index')
  },
  data () {
    return {
      activeIndex: -1,
    }
  },
  watch: {
    activeTab: {
      immediate: true,
      handler (val) {
        if (val == 'Installed') {
          if (this.installedPlugins.length > 0 && this.activeIndex == -1) {
            this.changeActiveIndex(0)
          }
        }
      }
    }
  },
  computed: {
    ...mapState(
      {
        installedPlugins: (state) => [state.modulePlugins.main].concat(state.modulePlugins.normal),
      }
    ),
  },
  mounted () {
  },
  methods: {
    changeActiveIndex (index) {
      this.activeIndex = index
    },
    gotoTabPlugins (e) {
      e.preventDefault()
      this.$emit('tab-change', {
        name: 'Plugins'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../themes/index.less");
.tab_installed {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .tab_inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .tab_empty {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    svg {
      width: 56px;
      height: 56px;
      fill: @darkTextColor4;
    }
    .empty_info {
      width: 100%;
      height: 32px;
      margin-top: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .empty_info_text {
        color: @darkTextColor4;
      }
    }
  }
}
</style>